<!--
  ~ Copyright (c) Jack魏 2023 - 2024, All Rights Reserved.
  -->

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keywords" content="Layui通用后台管理系统,yiyi-web后台管理,后台管理系统,权限系统">
  <meta name="description" content="后台管理">
  <meta name="author" content="Jack魏">
  <link rel="icon" th:href="@{/images/yiyi.ico}" type="image/x-icon">
  <title>YiYi-Web</title>
  <!-- layui -->
  <link type="text/css" rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
  <script type="text/javascript" th:src="@{/layui/layui.js}" charset="UTF-8"></script>
  <!-- jQuery -->
  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
  <!-- config 常用配置 -->
  <script type="text/javascript" th:src="@{/js/config.js}"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <a href="">
      <div class="layui-logo layui-hide-xs layui-bg-black" style="cursor: pointer">
        <img src="images/yiyi-web.png" class="layui-nav-img">
        YiYi Web
      </div>
    </a>
    <ul class="layui-nav layui-layout-right" lay-filter="my-filter-nav">
      <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
        <a href="javascript:;">
          <img
            th:src="${#strings.isEmpty(currentUser.headImage)} ? 'images/yiyi-web.png' : 'file/'+${currentUser.headImage}"
            class="layui-nav-img"
            id="userImg" th:text="${currentUser.userName}"/>
        </a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;" id="myInfo">基本资料</a></dd>
          <dd><a href="javascript:;" id="myPassword">修改密码</a></dd>
          <dd><a href="javascript:;" id="myOut">退出</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-unselect>
        <a href="javascript:;" id="menuRight">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="left-nav">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">系统设置</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" id="sys/userView">用户管理</a></dd>
            <dd><a href="javascript:;" id="sys/pageView">页面管理</a></dd>
            <dd><a href="javascript:;">权限管理</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <iframe id="myIframeId" src="home" style="width:99.6%; height:100%;"></iframe>
  </div>
  <!--  底部版权信息-->
  <div class="layui-footer" style="text-align: center">
    Copyright (c) <a href="https://blog.csdn.net/WeiHao0240" target="_blank">Jack魏</a> 2023-2024
    <a href="https://gitee.com/jack0240/yiyi-web/" target="_blank">YiYi Web后台权限管理系统</a>, All Rights Reserved.
  </div>
</div>

<script th:inline="javascript">
  // js里面Model取值，注意上面的需要使用内联js
  let currentUser = [[${currentUser}]];
  let rootPath = [[${rootPath}]];
  layui.use(['element', 'layer', 'util'], function () {
    var element = layui.element;
    var layer = layui.layer;

    // 本地存储当前用户
    layui.data(LOCAL, {
      key: CURRENT_USER,
      value: currentUser,
    });
    // 不能一起存储，分开存储
    layui.data(LOCAL, {
      key: ROOT_PATH,
      value: rootPath,
    });

    // 左边导航点击事件
    element.on('nav(left-nav)', function (elem) {
      console.log("---左边导航点击", elem)
      $("#myIframeId").attr("src", elem.context.id)
    });

    // 右边下拉导航点击事件
    element.on('nav(my-filter-nav)', function (elem) {
      console.log("右边导航点击---", elem)
      switch (elem.context.id) {
        case "myInfo":
          $("#myIframeId").attr("src", `sys/userInfo?userId=${currentUser.id}`)
          break;
        case "myPassword":
          $("#myIframeId").attr("src", "forget")
          break;
        case "myOut":
          $.ajax({
            type: 'POST', // 请求类型
            async: true, // 默认true,异步
            dataType: 'json', // 数据类型
            contentType: 'application/json;charset=utf-8', // 发送的数据类型
            url: 'index/logout', // 请求URL
            success: function (data) {
              if (data.code === 200) {
                layer.msg("退出成功~", {icon: 6});
                // 成功后等待，跳转到登录页面
                setTimeout(function () {
                  window.location.replace("");
                }, 1000);
              } else {
                layer.msg(data.message, {icon: 5});
              }
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
              layer.msg('服务器内部错误！', {icon: 2});
            }
          });
          break;
        case "menuRight" :
          layer.open({
            type: 1,
            title: '更多',
            content: '<div style="padding: 15px;">主题更改，待开发。。。</div>',
            area: ['260px', '100%'],
            offset: 'rt', // 右上角
            anim: 'slideLeft', // 从右侧抽屉滑出
            shadeClose: true,
            scrollbar: false
          });
      }
    });
  });
</script>
</body>
</html>